<template>
    <div class="container">
        <mt-header title="新增地址" v-if="modifyId==''">
            <router-link :to="historyUrl" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <mt-header title="修改地址" v-if="modifyId!=''">
            <router-link :to="historyUrl" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="bodyClass">
            <div class="itema"><span>联系人</span></div>
            <div class="itemb"><input placeholder="姓名" v-model="name"></div>
            <div class="itemc">
                <el-radio v-model="sex" border label="1">先生</el-radio>
                <el-radio v-model="sex" border label="2">女士</el-radio>
            </div>
            <div class="itemd"><span>电话</span></div>
            <div class="iteme"><input placeholder="手机号码" v-model="phoneName"></div>
            <div class="itemf"><span>地址</span></div>
            <div class="itemg" @click="getAddress">
                <span class="left" v-if="chooseAddress!=undefined">{{chooseAddress.name}}</span><span class="right">></span>
            </div>
            <div class="itemh"><span>门牌号</span></div>
            <div class="itemi"><input placeholder="例：5号楼532室" v-model="doorId"></div>
            <div class="itemj"><span>标签</span></div>
            <div class="itemk">
                <el-radio v-model="tag" border label="1">家</el-radio>
                <el-radio v-model="tag" border label="2">公司</el-radio>
                <el-radio v-model="tag" border label="3">学校</el-radio>
            </div>
        </div>
        <button class='confirm' @click="setAddress" v-if="modifyId==''">确认增加</button>
        <button class='confirm' @click="modifyAddress" v-if="modifyId!=''">确认修改</button>
    </div>
</template>
<script>
    import axios from 'axios'
    import {mapState,mapMutations} from 'vuex'
    export default{
        data(){
            return{
                name:"",
                phoneName:"",
                sex:'1',
                doorId:"",
                tag:'1',
            }
        },
        mounted(){
            this.name=this.addAddressMessage.name;
            this.phoneName=this.addAddressMessage.phoneName;
            this.sex=this.addAddressMessage.sex;
            this.doorId=this.addAddressMessage.doorId;
            this.tag=this.addAddressMessage.tag;
        },
        computed:{
            ...mapState(['chooseAddress','historyUrl','modifyId','addAddressMessage'])
        },
        methods:{
            ...mapMutations(['initAddAddressMessage','setAddAddressMessage']),
            async setAddress(){
                let postData={
                    msg:{
                        name:this.name,
                        phoneName:this.phoneName,
                        sex:this.sex,
                        doorId:this.doorId,
                        tag:this.tag,
                        address:this.chooseAddress
                    }
                };
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                await axios({
                    method:'post',
                    url:'/users/addUsersAddress',
                    data:postData,
                    headers:{
                        "Content-Type":"application/json",
                        'Authorization':tokenStr,
                    }
                }).then(response=>{
                    if(response.code==200){
                        console.log('设置地址成功');
                        this.$router.push('addressMessage');
                    }
                });
            },
            async modifyAddress(){
                let postData={
                    msg:{
                        name:this.name,
                        phoneName:this.phoneName,
                        sex:this.sex,
                        doorId:this.doorId,
                        tag:this.tag,
                        address:this.chooseAddress
                    },
                    addressId:this.modifyId
                };
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                await axios({
                    method:'post',
                    url:'/users/setUsersAddress',
                    data:postData,
                    headers:{
                        "Content-Type":"application/json",
                        'Authorization':tokenStr,
                    }
                }).then(response=>{
                    if(response.code==200){
                        console.log('修改地址成功');
                        this.$router.push('addressMessage');
                    }
                });
            },
            getAddress(){
                let obj={
                    name:this.name,
                    phoneName:this.phoneName,
                    sex:this.sex,
                    doorId:this.doorId,
                    tag:this.tag,
                }
                this.setAddAddressMessage(obj);
                this.$router.push('address');
            }
        },
    }
</script>
<style lang="scss" scoped>
    @import '../style/mixin';
    @import 'mint-ui/lib/style.css';
    *{
        margin: 0;
        padding: 0;
    }
    .bodyClass{
        @include width-height(100%,18rem);
        display: grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
        grid-template-areas: "a b"
                             ". c"
                             "d e"
                             "f g"
                             "h i"
                             "j k";
        .itema{
            grid-area: a;
        }
        .itemb{
            grid-area: b;
        }
        .itemc{
            grid-area: c;
        }
        .itemd{
            grid-area: d;
        }
        .iteme{
            grid-area: e;
        }
        .itemf{
            grid-area: f;
        }
        .itemg{
            grid-area: g;
        }
        .itemh{
            grid-area: h;
        }
        .itemi{
            grid-area: i;
        }
        .itemj{
            grid-area: j;
        }
        .itemk{
            grid-area: k;
        }
        div{
            margin-top: 0.1rem;
            border-bottom: 1px solid #f1f1f1;
            position: relative;
            span{
                display: inline-block;
                @include width-height(100%,100%);
                @include font-size-color(1.2rem,#000);
                padding:0.5rem 0 0 0.5rem;
            }
            .left{
                @include font-size-color(1.2rem,#666);
                display: inline-block;
                @include width-height(90%,100%);
                line-height: 2rem;
                padding-right: 0.5rem;
                position: absolute;
            }
            .right{
                display: inline-block;
                @include width-height(1rem,100%);
                line-height: 2rem;
                padding-right: 0.5rem;
                position: absolute;
                right: 0.5rem;
            }
            input{
                @include width-height(97%,2rem);
                padding:0.4rem 0 0 0.5rem;
                line-height: 2rem;
                border: none;
                @include font-size-color(1.2rem,#666);
            }
        }
    }
    .confirm{
        margin-top: 0.5rem;
        @include width-height(100%,2.5rem);
        @include blue;
        @include font-size-color(1.2rem,#fff);
        border: none;
        border-radius: 0.5rem;
    }
</style>
